<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>产品溯源</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="../../../component/elementUI/index.css">
  <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../style/free.css">
  <style>
    /* 阴影框 */
    .style-box {
      background-color: white;
      margin: 20rem;
      padding: 20rem;
      padding-top: 20rem;
      padding-bottom: 20rem;
      border-radius: 8rem;
      /* 14 */
      box-shadow: 0 2rem 12rem rgba(0, 0, 0, 0.15);
      position: relative;
      overflow: hidden;
      align-items: center;
    }

    /* 固定导航栏样式 */
    .fixed-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background-color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 内容区域上边距，避免被导航栏遮挡 */
    .content-wrapper {
      margin-top: 100rem;
    }

    /* 导航项激活状态 */
    .nav-item.active {
      color: #4CAF50 !important;
      font-weight: bold;
    }

    .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1.5rem;
      height: 3px;
      background-color: #4CAF50;
      border-radius: 3px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <el-row :gutter="0">
      <!-- 导航栏 -->
      <el-col :span="24" class="bg-white flex justify-around p border-bottom fixed-top" style="height: 95rem;">
        <div class="text-center position-relative nav-item active font" data-target="#auth-check"
          style="line-height: 95rem;">权威检测</div>
        <div class="text-center position-relative nav-item text-666 font" data-target="#origin-info"
          style="line-height: 95rem;">产地信息</div>
        <div class="text-center position-relative nav-item text-666 font" data-target="#planting-process"
          style="line-height: 95rem;">种植环节</div>
        <div class="text-center position-relative nav-item text-666 font" data-target="#production-company"
          style="line-height: 95rem;">生产企业</div>
      </el-col>
      <!-- 内容包装器 -->
      <div class="content-wrapper">
        <!-- 溯源码信息卡片 -->
        <el-col :span="24">
          <div class="style-box">
            <div class="mx-2 mb-1 text-dark font">您查询的溯源码编号为:<br />
              <span class="text-center text-dark">{{nodeKey}}</span>
            </div>
            <div class="mx-2 flex align-center justify-end text-success font-weight-bold font">核验通过</div>
          </div>
        </el-col>
        <!-- 产品信息 -->
        <el-col :span="24">
          <div class="text-center p-5 ">
            <img class="col-6 mb shadow rounded-circle" style="object-fit: cover;border: 4px solid white; "
              :src="imageApi + formData.articlePic"></img>
            <div class="font-weight-bold text-dark mt-5 mb-3">{{formData.Article_Name || ''}}</div>
            <div class="d-inline-block text-white bg-hover-success m-1 font-sm rounded-lg">
              &emsp;{{formData.Qualification_Category}}&emsp;</div>
            <div class="harvest-time text-success font">采收时间: 2025.10.25</div>
          </div>
        </el-col>
        <!-- 认证信息 -->
        <el-col :span="24" id="auth-check">
          <div class="">
            <div class=" mx-2 mb-1 font text-dark flex justify-between align-center font-weight-bolder"
              style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
              <span>权威检测</span>
              <div class="mx-2 mb-1 text-success font-weight-bold flex align-center ">
                <span class="mr-1">✓</span>可追溯
              </div>
            </div>
            <div class="bg-white m-2 py-2 rounded shadow bg-light position-relative overflow-hidden rounded-lg p-1">
              <div v-for="(item,index) in Qualification_Numbers" :key="index"
                class="mx-2 mb-1 overflow-hidden rounded-lg p-2" style="border: 2px solid #4CAF50;">
                <img class=" rounded mb-3 w-100" :src="imageApi + QualificationPicture_URLs[index]" />
                <div class="text-center">
                  <div class=" font-weight-bold text-dark mb-1 w-100
                ">有机产品认证证书</div>
                  <div class="font  text-dark mb-1">证书编号: {{item}}</div>
                  <div class="font  text-dark mb-1">有效期起: 2024.08.12</div>
                  <div class="font  text-dark mb-1">有效期止: 2025.08.11</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 产地信息 -->
        <el-col :span="24" id="origin-info">
          <div class="">
            <div class=" mx-2 mb-1 font text-dark flex justify-between align-center font-weight-bolder"
              style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
              <span>产地信息</span>
              <div class="mx-2 mb-1 text-success font-weight-bold flex align-center ">
                <span class="mr-1">✓</span>可追溯
              </div>
            </div>
            <div class="style-box">
              <div class="text-success font mb-2 text-center">种植地块</div>
              <div class="position-relative w-100 rounded overflow-hidden">
                <yl-map disabled height="300px" :value="formData.Coords"></yl-map>
                <!-- 地图Coords  -->
              </div>
              <div class="mt-2 flex justify-between items-center">
                <div class="text-muted font">{{formData.Traceability_Base_Name}} {{formData.Land_Name}}</div>
                <div class="font-sm text-muted bg-light" style="padding: 0.5rem 1rem;border-radius: 20px;">导航</div>
              </div>
            </div>
            <div class="style-box">
              <div class="text-blue font mb-2 text-center">良心生产，不怕监督，24小时视频监控</div>
              <div class="position-relative w-100 bg-black overflow-hidden" style=" border-radius: 8px;">
                <video style="width:100%;" :src="imageApi + formData.Mp4_Url" controls autoplay loop muted></video>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 种植环节 -->
        <el-col :span="24" id="planting-process">
          <div>
            <div class=" mx-2 mb-1 font text-dark flex justify-between align-center font-weight-bolder"
              style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
              <span>种植环节</span>
              <div class="mx-2 mb-1 text-success font-weight-bold flex align-center ">
                <span class="mr-1">✓</span>可追溯
              </div>
            </div>
            <div class="style-box flex">
              <img class="mr-2 shadow rounded-circle flex-shrink"
                style="width: 150rem;height: 150rem; object-fit: cover;border: 4px solid white; "
                :src="imageApi + formData1[0].PeoplePicture_URL" alt="管理员头像" />
              <div class="bg-white w-100 rounded shadow">
                <div class="text-dark font-sm m-2 ">我是基地管理员: {{formData1[0].Planting_People_Name}}</div>
                <div class="text-muted font-sm m-2">以下农事操作，是在我的监督下完成</div>
              </div>
            </div>
            <div class="style-box" style="padding-left: 1.5rem;">
              <div class="bg-light position-absolute"
                style="left: 0.6rem;top: 0.8rem; width: 2px;height: calc(100% - 0.8rem);">
              </div>
              <div class="style-box " style="padding-left: 1.5rem;">
                <el-timeline-item v-for="(activity, index) in formData1" :key="index"
                  :timestamp="activity.Operation_Date">
                  <el-card>
                    {{activity.Operation_Type}}
                  </el-card>
                </el-timeline-item>
                </el-timeline>
              </div>
            </div>
        </el-col>
        <!-- 生产企业 -->
        <el-col :span="24" id="production-company">
          <div>
            <div class=" mx-2 mb-1 font text-dark flex justify-between align-center font-weight-bolder"
              style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
              <span>生产企业</span>
              <div class="mx-2 mb-1 text-success font-weight-bold flex align-center ">
                <span class="mr-1">✓</span>可追溯
              </div>
            </div>
            <div class="style-box">
              <div class="mb-4">
                <div class="">
                  <div class="text-dark font-weight-bold font text-center">{{formData.Merchant_Name || ''}}</div>
                  <div class="text-center bg-warning  text-white rounded-lg mt-2 mb-2 px py  font-small ml-2 ">
                    <span class=" mr-1">✓</span>已认证
                  </div>
                </div>
                <div class="">
                  <img class="w-100" style="object-fit: cover;" :src="imageApi + formData.Logo_URL" alt="企业图片" />
                  <div class="position-absolute flex"
                    style="bottom: 0.5rem; left: 50%;transform: translateX(-50%); gap: 0.3rem;">
                    <div class="bg-white"></div>
                    <div class="bg-muted" style=" width: 0.5rem; height: 0.5rem; border-radius: 50%;"></div>
                    <div class="bg-muted" style=" width: 0.5rem; height: 0.5rem; border-radius: 50%;"></div>
                    <div class="bg-muted" style=" width: 0.5rem; height: 0.5rem; border-radius: 50%;"></div>
                  </div>
                </div>
              </div>
              <div class="text-muted font-sm mb-4 leading-relaxed">{{formData.Memo}}</div>
            </div>
          </div>
        </el-col>
      </div> 
      <!-- 内容包装器结束 -->
    </el-row>
  </div>


  <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
  <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
  <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../../utils/jweixin.js"></script>
  <script type="text/javascript" src="../../../utils/components.js"></script>
  <script type="text/javascript" src="../../../utils/compressor.js"></script>
  <script type="text/javascript" src="../../../utils/validity.js"></script>
  <script type="text/javascript" src="../../../utils/utils.js"></script>
  <script type="text/javascript" src="../../../utils/http.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>